﻿<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS 路由实例</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>


</head>
<body ng-app='routingDemoApp'>

    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/computers">电脑</a></li>
        <li><a href="#/printers">打印机</a></li>
        <li><a href="#/blabla">其他</a></li>
    </ul>

    <div ng-view></div>
  
    <script>
        //1、载入了实现路由的 js 文件：angular-route.js。
        //2、包含了 ngRoute 模块作为主应用模块的依赖模块。
        //3、使用 ngView 指令。 该 div 内的 HTML 内容会根据路由的变化而变化。
         //4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
        angular.module('routingDemoApp', ['ngRoute'])

            .config(['$routeProvider', function ($routeProvider) {
                $routeProvider
                    .when('/', { template: '这是首页页面' })
                    .when('/computers', { template: '这是电脑分类页面' })
                    .when('/printers', { template: '这是打印机页面' })
                    .otherwise({ redirectTo: '/' });
            }]);
    </script>


</body>
</html>

   
